<include file="public/header" />
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">分类</a>
                <a>
                    <cite>分类列表</cite></a>
            </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  </a>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <form class="layui-form layui-col-space5">
            <div class="layui-input-inline layui-show-xs-block">
              <input class="layui-input" placeholder="分类名" name="cate_name"></div>
            <div class="layui-input-inline layui-show-xs-block">
              <button class="layui-btn" lay-submit="" lay-filter="sreach">
                <i class="layui-icon">&#xe615;</i></button>
            </div>

          </form>

          <hr>
        </div>
        <div class="layui-card-header">
          <button class="layui-btn" onclick="xadmin.open('增加一级分类','{:url('Goods/editCategory',array('type'=>2))}',800,600)">
            <i class="layui-icon"></i>添加</button></div>
      </div>
      <div class="layui-card-body ">
        <table class="layui-table layui-form">
          <thead>
          <tr>

            <th width="70">ID</th>
            <th>名称</th>
            <th width="50">排序</th>
            <th width="80">显示</th>
            <th width="250">操作</th>
          </thead>
          <tbody class="x-cate">
          <foreach name="list" key="key" item="vo">
            <tr cate-id='{$vo.id}' fid='{$vo.parent_id}' >
              <td>{$vo.id}</td>
              <td>
                <i class="layui-icon x-show" status='true'>&#xe623;</i>{$vo.name}
              </td>
              <td>
                <input type="text" name="sort" class="layui-input" onblur="GoodChangeTableVal('category','id','{$vo.id}','sort',this)" value="{$vo.sort}" lay-skin="primary">
              </td>
              <td>
                {$vo.status}
              </td>
              <td class="td-manage">
                <button class="layui-btn layui-btn layui-btn-xs"  onclick="xadmin.open('编辑','{:url('Goods/editCategory',array('id'=>$vo['id']))}',800,600)" ><i class="layui-icon">&#xe642;</i>编辑</button>
                <button class="layui-btn layui-btn-warm layui-btn-xs"  onclick="xadmin.open('增加{$vo.name}分类','{:url(\'Goods/editCategory\',array(\'parent_id\'=>$vo[\'id\'],\'type\'=>'2'))}',800,600)" ><i class="layui-icon">&#xe642;</i>添加子栏目</button>
                <button class="layui-btn-danger layui-btn layui-btn-xs"  href="javascript:void(0)" data-url="{:url('Goods/CategoryDel')}" data-id="{$vo.id}" onclick="delfun(this)"><i class="layui-icon">&#xe640;</i>删除</button>
              </td>
            </tr>
            <if condition="$vo.child neq '' " >
              <foreach  name="$vo.child" item="vv">
                <tr cate-id='{$vv.id}' fid='{$vo.id}' >
                  <td>{$vv.id}</td>
                  </td>
                  <td>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    ├{$vv.name}
                  </td>
                  <td>
                    <input type="text" name="sort" class="layui-input" onblur="GoodChangeTableVal('category','id','{$vv.id}','sort',this)" value="{$vv.sort}" lay-skin="primary">
                  </td>
                  <td>
                    {$vv.status}
                  </td>
                  <td class="td-manage">
                    <button class="layui-btn layui-btn layui-btn-xs"  onclick="xadmin.open('编辑','{:url('Goods/editCategory',array('id'=>$vv['id']))}',800,600)" ><i class="layui-icon">&#xe642;</i>编辑</button>
                    <button class="layui-btn-danger layui-btn layui-btn-xs"  href="javascript:void(0)" data-url="{:url('Goods/CategoryDel')}" data-id="{$vv.id}" onclick="delfun(this)"><i class="layui-icon">&#xe640;</i>删除</button>
                  </td>
                </tr>
              </foreach>
            </if>

          </foreach>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
</div>
<script>

  layui.use(['form', 'layedit', 'laydate','jquery','upload'], function(){
    var form = layui.form
            ,layer = layui.layer
            , $ = layui.jquery
            , upload = layui.upload
            ,laydate = layui.laydate
            ,inputTags = layui.inputTags
    var layedit = layui.layedit;

  });

  // 修改指定表的指定字段值 包括有按钮点击切换是否 或者 排序 或者输入框文字
  function GoodChangeTableVal(table,id_name,id_value,field,obj,text)
  {
    var value = $(obj).val();
    $.ajax({
      type: 'post',
      url:"{:url('/Index/changeTableVal')}",
      dataType: 'json',
      data:{table:table,id_name:id_name,id_value:id_value,field:field,value:value},
      success: function(data){
        // if(!$(obj).hasClass('no') && !$(obj).hasClass('yes'))
        if(data.code==200){
          layer.msg('success', {icon: 1,time:100});
        }else {
          layer.msg('异常', {icon: 2});
        }

      }
    });
  }


  function delfun(obj) {
    // 删除按钮
    layer.confirm('确认删除？', {
      btn: ['确定', '取消'] //按钮
    }, function () {
      $.ajax({
        type: 'post',
        url: $(obj).attr('data-url'),
        data : {id:$(obj).attr('data-id')},
        dataType: 'json',
        success: function (data) {

          if (data.code == 200) {
            layer.msg(data.msg, {icon: 1,time:100});
            $(obj).parents("tr").remove();
          } else {
            layer.alert(data.msg, {icon: 2});
          }
        }
      })
    }, function () {
      layer.closeAll();
    });
  }

  // 分类展开收起的分类的逻辑
  //
  $(function(){
    $("tbody.x-cate tr[fid!='0']").hide();
    // 栏目多级显示效果
    $('.x-show').click(function () {
      if($(this).attr('status')=='true'){
        $(this).html('&#xe625;');
        $(this).attr('status','false');
        cateId = $(this).parents('tr').attr('cate-id');
        $("tbody tr[fid="+cateId+"]").show();
      }else{
        cateIds = [];
        $(this).html('&#xe623;');
        $(this).attr('status','true');
        cateId = $(this).parents('tr').attr('cate-id');
        getCateId(cateId);
        for (var i in cateIds) {
          $("tbody tr[cate-id="+cateIds[i]+"]").hide().find('.x-show').html('&#xe623;').attr('status','true');
        }
      }
    })
  })

  var cateIds = [];
  function getCateId(cateId) {
    $("tbody tr[fid="+cateId+"]").each(function(index, el) {
      id = $(el).attr('cate-id');
      cateIds.push(id);
      getCateId(id);
    });
  }

</script>
</body>
</html>
